import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { increment } from '../store/modules/count'

export class Home extends PureComponent {
  add(num){
    this.props.increment(num)
  }
  render() {
    const { counter } = this.props
    return (
      <div>
        <h3>Home counter: {counter}</h3>
        <div>
          <button onClick={() => this.add(5)}>+5</button>
          <button onClick={() => this.add(10)}>+10</button>
          <button onClick={() => this.add(20)}>+20</button>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  counter: state.count.counter
})
const mapDispatchToProps = (dispatch) => ({
  increment: (num) => dispatch(increment(num)),
})

export default connect(mapStateToProps,mapDispatchToProps)(Home)